import { ref, reactive  } from 'vue'
import { useRoute } from 'vue-router'
const getDetailInstance = () => {
	const fixedSpace = ref('fixedSpace')
	const route = useRoute()
	const childrenRefs = []
	const tabsRef = ref()
	

  const tabState = reactive({
    offset: 0,
    active: 0
  })
	// 添加子组件
	const pushChild = (...child) => {
		childrenRefs.push(...child)
		return childrenRefs
	}

	// 计算脱离文档流后class为fixedSpace的dom元素上边距
	const offsetForFixed = () => {
		return parseFloat(`${fixedSpace.value.offsetHeight}`)
	}
	
	// 刷新脱离文档流后class为fixedSpace的dom元素上边距
	const refreshOffset = () => {
		tabState.offset = `${offsetForFixed()}px`
		rendered()
	}

	// 渲染子组件，包括初始化betterscroll以及计算定位属性
	const rendered = function () {
		childrenRefs[tabState.active].value.refresh({ offsetTop: `${offsetForFixed() + 37}px` })
	}
	return {
		fixedSpace,
		pushChild,
		rendered,
		refreshOffset,
		tabsRef,
		tabState
	}
}
export default  getDetailInstance